<%@page import="com.yjw.enity.Prod"%>
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
   
    
    <title>My JSP 'p.jsp' starting page</title>
     <link href="style/bootstrap.min.css" rel="stylesheet">
<style   type="text/css"   >
	input {
		height:30px;
	}
</style>

  </head>
  
  <body>
  
     <table    class="zebra-striped">
     	<thead>
     		<tr><th>商品编号</th><th>名称</th><th>价格</th><th>是否上架</th><th>修改</th><th>删除</th></tr>
     	</thead>
     	<tbody  id="tbody">
     		
     	</tbody>
     </table>
     <pre>                                         添加商品</pre>
     <form>
     	编号：<input  type="text"  id="myid"/><br/>
     	名称：<input  type="text"  id="myname"/><br/>
     	价格：<input  type="text"  id="myprice"><br/>
     	是否上架：是<input  type="radio"  name = "rad"  id="mytrue"  /><br/>
     	否：<input  type="radio"  name="rad"  id="myfalse" />
     	添加：<input  type="button"  value="添加"  onclick="tianjia()"  id="myjia"/>
     	<div  style="display:none"  id="mychange">更改：<input  type="button"  value="更改"  onclick="changeing()"/></div>
     </form>
   
     <script  type="text/javascript">
     	var xmlHttp;
     	function  createXMLHttpRequest(){
     		if(window.ActiveXObject){
     			xmlHttp = new  ActiveXObject("Microsoft.XMLHTTP");
     		}else {
     			xmlHttp = new  XMLHttpRequest();
     		}
     	}
     	function  changeing(){
     		createXMLHttpRequest();
     		document.getElementById("myjia").style.display="block";
     		document.getElementById("mychange").style.display="none";     		
     		var id = document.getElementById("myid").value;
     		var name = document.getElementById("myname").value;
     		var price = document.getElementById("myprice").value;
     		var myable ;
     		if(document.getElementById("mytrue").checked){
     			myable= 1;
     		}else{
     			myable = 0;
     		}
     		xmlHttp.onreadystatechange = callme;
     		xmlHttp.open("get","p.jspx?s=toup&id="+id+"&name="+name+"&price="+price+"&myable="+myable,true);
     		 document.getElementById("myid").value="";
     		 document.getElementById("myname").value="";
     		 document.getElementById("myprice").value="";    
     		xmlHttp.send();
     	}
     	function  changemes(a){
     		document.getElementById("tbody").removeChild(document.getElementById(a));
     		createXMLHttpRequest();
     		document.getElementById("myjia").style.display="none";
     		document.getElementById("mychange").style.display="block";    		
     		xmlHttp.onreadystatechange = callback;
     		xmlHttp.open("get", "p.jspx?s=change&name="+a, true);
     		xmlHttp.send();
     	}
     	function  del(a,b){
     		createXMLHttpRequest();
     		document.getElementById("tbody").removeChild(document.getElementById(a));     			
     		xmlHttp.open("get", "p.jspx?s=del&name="+a, true);
     		xmlHttp.send();
     	}
     	function callback(){
     		if(xmlHttp.readyState==4){
     			if(xmlHttp.status==200){     				
     		var xml = xmlHttp.responseXML;
			var nameid=xml.getElementsByTagName("id")[0];
     		 nameid = nameid.childNodes[0].nodeValue;
     		var name = xml.getElementsByTagName("name")[0];
     		name = name.childNodes[0].nodeValue;
     		var price = xml.getElementsByTagName("price")[0];
     		price = price.childNodes[0].nodeValue;
     		var myable = xml.getElementsByTagName("able")[0];
     		myable = myable.childNodes[0].nodeValue;     		
     		var myid = document.getElementById("myid").value=nameid;
     		var myname = document.getElementById("myname").value=name;
     		var myprice = document.getElementById("myprice").value=price;
     		if(myable){
     			document.getElementById("mytrue").setAttribute("checked", "checked");
     		}else {
     			document.getElementById("myfalse").setAttribute("checked", "checked");
     		}
     			}
     		}
     	}     
     	function  tianjia(){
     		createXMLHttpRequest();
     		var myid = document.getElementById("myid").value;
     		var myname = document.getElementById("myname").value;
     		var myprice = document.getElementById("myprice").value;
     		var myable ;
     		if(document.getElementById("mytrue").checked){
     			myable= 1;
     		}else {
     			myable = 0;
     		}
     		if(myid!=null&&myname!=null&&myprice!=null&&myable!=null){
     			xmlHttp.onreadystatechange = callme;
     		xmlHttp.open("get", "p.jspx?s=tianjia&myid="+myid+"&myname="+myname+"&myprice="+myprice+"&myable="+myable, true);
     		 document.getElementById("myid").value="";
     		 document.getElementById("myname").value="";
     		 document.getElementById("myprice").value="";
     		xmlHttp.send();
     		}     		
     	}
     	function  callme(){     		
     		if(xmlHttp.readyState==4){
     			if(xmlHttp.status==200){
     			//先拿到页面上的id    			
     				var xml = xmlHttp.responseXML;
     				var ps = xml.getElementsByTagName("p");    				
     				for(var i=0;i<ps.length;i++){
     				//得到值
     					var id = ps[i].getElementsByTagName("id")[0].childNodes[0].nodeValue;
     					var  pname = ps[i].getElementsByTagName("name")[0].childNodes[0].nodeValue;    					
     					var  price = ps[i].getElementsByTagName("price")[0].childNodes[0].nodeValue;    					
     					var mable =  ps[i].getElementsByTagName("able")[0].childNodes[0].nodeValue;
     					//建立行数
     					var tr = document.createElement("tr");
     					tr.setAttribute("id",id);    					
     					//创建文本
     					var textid =   document.createTextNode(id);    					
     					var textname = document.createTextNode(pname);
     					var textprice = document.createTextNode(price);
     					var textable = document.createTextNode(mable);
     					var  bianji = document.createTextNode("编辑");
     					var  shanchu = document.createTextNode("删除");
     					//建立第一列
     					var td1 = document.createElement("td");
     					td1.appendChild(textid);
     					tr.appendChild(td1);
     					//第二列
     					var td2 = document.createElement("td");
     					td2.appendChild(textname);
     					tr.appendChild(td2);
     					//第三列
     					var  td3 = document.createElement("td");
     					td3.appendChild(textprice);
     					tr.appendChild(td3);
     					//第四列
     					var  td4 = document.createElement("td");
     					td4.appendChild(textable);
     					tr.appendChild(td4);
     					//第五列
     					var td5 = document.createElement("td");
     					
     					var a1 = document.createElement("a");
     					a1.setAttribute("href","javascript:void(0)");
     					a1.setAttribute("onclick","changemes("+id+")");
     					a1.appendChild(bianji);
     					td5.appendChild(a1);
     					
     					tr.appendChild(td5);
     					//第六列
     					var td6 = document.createElement("td");
     					
     					var a2 = document.createElement("a");
     					a2.setAttribute("href","javascript:void(0)");
     					a2.setAttribute("onclick","del("+id+","+ps.length+")");
     					a2.appendChild(shanchu);
     					td6.appendChild(a2);
     					
     					tr.appendChild(td6);
     					document.getElementById("tbody").appendChild(tr);
     				}     				
     			}
     		}
     	}
     	function looking(){
     		createXMLHttpRequest();
     		xmlHttp.onreadystatechange = callme;
     		xmlHttp.open("get","p.jspx?s=look",true);
     		xmlHttp.send();
     	}
     	window.onload=looking;
     </script>
  </body>
</html>
